const fs = require('fs')
const path = require('path')
const marked = require('marked')
const browserSync = require('browser-sync')

/**
 * 1. 读取 md 和 css 内容
 * 2. 把上述内容替换占位符，生成最终 html 字符串
 * 3. 把 html 字符串写入指定 html
 * 4. 监听 md 文档内容的变化，更新 html 内容
 * 5. 使用 browser-sync 实时显示 html 内容
 */

// 我们最终会使用 node .\02-md-to-html.js index.md 运行，所以process.argv[2]获取的就是index.md文件名
let mdPath = path.join(__dirname, process.argv[2])
let cssPath = path.resolve('github.css')
// path.extname(mdPath) 即为 .md
let htmlPath = mdPath.replace(path.extname(mdPath),'.html')

fs.watchFile(mdPath, (curr, prev) => {
  if (curr.mtime !== prev.mtime) {
    // 读 md
    fs.readFile(mdPath, 'utf-8', (err, data) => {
      // 使用 marked 插件转换 md->html
      let htmlStr = marked(data)
      // 读 css
      fs.readFile(cssPath, 'utf-8', (err, data) => {
        let retHtml = temp.replace('{{content}}',htmlStr).replace('{{style}}',data)
        // 写 html
        fs.writeFile(htmlPath, retHtml, (err) => {
          console.log('html 生成成功')
        })
      })
    })
  }
})

browserSync.init({
  browser:'',// 使用默认浏览器
  server:__dirname,// 服务根目录
  watch: true,// 热更新监听
  index:path.basename(htmlPath)// 入口文件
})

const temp = `
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .markdown-body {
                box-sizing: border-box;
                min-width: 200px;
                max-width: 1000px;
                margin: 0 auto;
                padding: 45px;
            }
            @media (max-width: 750px) {
                .markdown-body {
                    padding: 15px;
                }
            }
            {{style}}
        </style>
    </head>
    <body>
        <div class="markdown-body">
            {{content}}
        </div>
    </body>
    </html>
`